{% include "../base/header.html" %}

<div id="app" v-loading="loading" element-loading-text="处理中...">
    <div class="tabs-nav oh">
        <span class="title fl">项目{% if data.project_id == None %}添加{% else %}编辑{% endif %}</span>
        <a href="{{ host }}project/index" class="backup fr">返回</a>
    </div>
    <el-form :model="rule_form" :rules="rules" ref="rule_form" label-width="100px" label-position="top">
        <el-form-item label="项目名称" prop="project_name">
            <el-input v-model="rule_form.project_name" placeholder="起一个响亮的项目名称吧"></el-input>
        </el-form-item>
        <el-form-item label="项目git ssh地址" prop="git_ssh_address">
            <el-input v-model="rule_form.git_ssh_address" placeholder="如：git@github.com:gongfuxiang/mogui.git" :disabled="is_disabled"></el-input>
        </el-form-item>
        <el-form-item label="项目路径地址" prop="dir_address">
            <el-input v-model="rule_form.dir_address" placeholder="如：/data/www" :disabled="is_disabled"></el-input>
        </el-form-item>
        <el-form-item label="git别名" prop="git_alias">
            <el-input v-model="rule_form.git_alias" placeholder="如：mymogui（默认git项目名称）" :disabled="is_disabled"></el-input>
        </el-form-item>
        <el-form-item label="是否集群模式">
            <el-switch
            disabled
            v-model="rule_form.is_cluster"
            on-color="#13ce66"
            off-color="#ff4949"
            on-value="1"
            off-value="0"
            on-text="是"
            off-text="否">
            </el-switch>
        </el-form-item>
        <el-form-item label="项目描述" prop="describe">
            <el-input type="textarea" v-model="rule_form.describe" placeholder="说点什么吧！" :autosize="{minRows: 3, maxRows: 6}"></el-input>
        </el-form-item>
        <div class="form-submit">
            <el-button type="primary" @click="form_submit('rule_form')" :loading="loading_submit">保存</el-button>
            <el-button @click="reset_submit('rule_form')">重置</el-button>
        </div>
    </el-form>
</div>

{% include "../base/footer.html" %}
<script type="text/javascript">
new Vue({
    el : '#app',
    data : {
        loading: false,
        loading_submit: false,
        is_disabled: ('{{ data }}' == 'None') ? false : true,
        rule_form: {
            csrfmiddlewaretoken: '{{ csrf_token }}' ,
            project_id : '{{ project_id }}',
            project_name: '{{ data.project_name }}',
            git_ssh_address: '{{ data.git_ssh_address }}',
            git_alias: '{{ data.git_alias }}',
            dir_address: '{{ data.dir_address }}',
            is_cluster: 0,
            describe: '{{ data.describe }}'
        },
        rules: {
            project_name: [
                { required: true, message: '请输入项目名称', trigger: 'blur' },
                { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
            ],
            git_ssh_address: [
                { required: true, message: '请输入项目git ssh地址', trigger: 'blur' },
                { min: 3, max: 255, message: '长度在 3 到 255 个字符', trigger: 'blur' }
            ],
            git_alias: [
                { required: false, message: 'git别名', trigger: 'blur' },
                { min: 0, max: 60, message: '长度在 0 到 60 个字符', trigger: 'blur' }
            ],
            dir_address: [
                { required: true, message: '请输入项目路径地址', trigger: 'blur' },
                { min: 3, max: 160, message: '长度在 3 到 160 个字符', trigger: 'blur' }
            ],
            describe: [
                { required: false, message: '请填写项目描述', trigger: 'blur' },
                { max: 255, message: '长度在 255 个字符以内', trigger: 'blur' }
            ]
        }
    },

    // 初始化
    created : function()
    {
        this.rule_form.is_cluster = ('{{ data.is_cluster }}' == '') ? 0 : '{{ data.is_cluster }}';
    },

    // 操作方法
    methods: {
        /**
         * [form_submit 表单提交]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-10T09:44:52+0800
         * @param    {[string]}                 form_name [form名称]
         */
        form_submit : function(form_name)
        {
            this.$refs[form_name].validate((valid) =>
            {
                if(!valid)
                {
                    this.$message({
                        showClose: true,
                        message: '请输入正确的数据',
                        type: 'warning'
                    });
                    return false;
                    
                }

                this.loading = true;
                this.loading_submit = true;
                this.$http.post(__host__+'project/save', this.rule_form, {emulateJSON: true}).then((response) =>
                {
                    this.loading = false;
                    var type = (response.data.code == 0) ? 'success' : 'error';
                    this.$message({
                        showClose: true,
                        message: response.data.msg,
                        type: type
                    });
                    if(response.data.code == 0)
                    {
                        setTimeout(function()
                        {
                            window.location.href=__host__+'project/index';
                        }, 1500);
                    } else {
                        // git错误提示信息
                        if(response.data.tips.length > 0)
                        {
                            this.$notify({
                                title: notify_error_title,
                                message: response.data.tips,
                                duration: 0
                            });
                        }
                        this.loading_submit = false;
                    }
                }, (response) =>
                {
                    this.$message({
                        showClose: true,
                        message: error_msg,
                        type: 'error'
                    });
                    this.loading = false;
                    this.loading_submit = false;
                });
            });
        },
        
        /**
         * [reset_submit 表单重置]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-10T09:44:52+0800
         * @param    {[string]}                 form_name [form名称]
         */
        reset_submit : function(form_name)
        {
            this.$refs[form_name].resetFields();
        }
    }
});
</script>